<template>
  <van-row>
    <van-nav-bar
      title="供应商信息"
      left-arrow
      left-text="返回"
      @click-left="$router.push('/')"
      @click-right="handleAction"
    >
      <template #right>
        <van-icon name="plus" size="20" />
      </template>
    </van-nav-bar>
    <van-search v-model="query.keyword" show-action placeholder="请输入关键字" @search="handleSearch">
      <template #action>
        <div @click="handleSearch">搜索</div>
      </template>
    </van-search>
    <van-index-bar>
      <div v-for="(item,index) in tableData" :key="index">
        <van-index-anchor :index="item.index" />
        <van-cell v-for="(i,idx) in item.children" :key="idx" clickable @click="toDetail(i)">
          <van-swipe-cell>
            <template #default>
              <div style="height: 30px">
                <div class="title">
                  {{ i.supplierName }}
                </div>
              </div>
            </template>
            <template #right>
              <van-button square type="warning" class="swipe_button" text="修改" @click="toUpdate(i)" />
              <van-button square type="danger" class="swipe_button" text="删除" @click="handleDelete(i)" />
            </template>
          </van-swipe-cell>
        </van-cell>
      </div>
    </van-index-bar>
    <van-popup v-model="showSubmit" position="right" :style="{ width: '100%', height: '100%' }">
      <supplier-submit-module ref="submitModule" @close="handleClose" />
    </van-popup>
    <van-popup v-model="showDetail" position="right" :style="{ width: '100%', height: '100%' }">
      <supplier-detail-module ref="detailModule" @close="handleClose" />
    </van-popup>
  </van-row>
</template>

<script>
import { deleteSupplier, selectAllSupplierWithIndex } from '@/api/supplier'
import SupplierSubmitModule from '@/views/supplier/supplierSubmit.vue'
import { Dialog } from 'vant'
import SupplierDetailModule from '@/views/supplier/supplierDetail.vue'
export default {
  name: 'Supplier',
  components: { SupplierDetailModule, SupplierSubmitModule },
  data() {
    return {
      showDetail: false,
      showSubmit: false,
      tableLoading: false,
      tableData: [],
      query: {
        keyword: ''
      }
    }
  },
  mounted() {
    this.doPage()
  },
  methods: {
    doPage() {
      this.tableLoading = true
      selectAllSupplierWithIndex(this.query).then(resp => {
        if (resp.success) {
          this.tableData = [...this.tableData, ...resp.data]
          this.page.total = resp.data.total
        }
      }).catch(() => {
      }).finally(() => {
        this.tableLoading = false
      })
    },
    handleSearch() {
      this.tableData = []
      this.doPage()
    },
    onRefresh() {
      this.doPage()
    },
    handleAction() {
      this.showSubmit = true
      this.$nextTick(() => {
        this.$refs.submitModule.init()
      })
    },
    toUpdate(row) {
      this.showSubmit = true
      this.$nextTick(() => {
        this.$refs.submitModule.init(row.id)
      })
    },
    toDetail(row) {
      this.showDetail = true
      this.$nextTick(() => {
        this.$refs.detailModule.init(row.id)
      })
    },
    handleDelete(row) {
      Dialog.confirm({
        title: '删除确认',
        message: '是否删除此信息'
      }).then(() => {
        deleteSupplier({ ids: [row.id] }).then(resp => {
          if (resp.success) {
            this.$toast.success('删除成功')
          }
        }).finally(() => {
          this.handleSearch()
        })
      }).catch(() => {})
    },
    handleClose() {
      this.showSubmit = false
      this.showDetail = false
      this.handleSearch()
    }
  }
}
</script>

<style scoped>

</style>
